<template>
  <div>
    <el-card class="search-card">
      <basic-form
        ref="formData"
        formItemWidth="160px"
        showColon
        defaultExpandStatus
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        :handleClearForm="clearCategorySelect"
        @getFormData="getFormData"
      >
        <CategoryMultipleSelect
          slot="category"
          ref="categoryMultiple"
          @selectCategoryCallback="setFormCateUuids"
        />
      </basic-form>
    </el-card>
    <el-card class="table-card">
      <SkusTable
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
    <MaintainImageDialog
      :visible.sync="maintainImage.visible"
      :sku-info="maintainImage.skuInfo"
      @success="getTableData"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import CategoryMultipleSelect from '@/components/Category/MultipleSelect';
import MaintainImageDialog from './components/MaintainImageDialog';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { COMMON_IMAGE_STATUS_ENUMS } from '@/constants/commodity';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getTableAction } from '@/utils/getBtnsRender';
import { potentialSearchService } from '@/api/commodity/temporaryPurchasingGoods/latentProduct';
import { manageAreaSearchService } from '@/api/public';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    CategoryMultipleSelect,
    MaintainImageDialog
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      maintainImage: {
        visible: false,
        skuInfo: {}
      }
    }
  },
  created () {
    this.setAreaOptions()
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        {
          label: '图文',
          method: this.handleImageText,
          hasAuth: true,
          authLabel: '图文编辑'
        },
      ]
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = {
        ...this.formData,
        ...this.paginationParams,
        queryFlag: '1',
        imageStatus: COMMON_IMAGE_STATUS_ENUMS.Perfecting
      }
      const res = await potentialSearchService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results ?? [])
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    },
    // 获取关联品类信息
    setFormCateUuids (list) {
      this.formData.categoryUuids = list.map(item => item.categoryUuid)
    },
    // 清空品类选择信息
    clearCategorySelect () {
      this.$refs.categoryMultiple.clearSelectResult()
    },
    // 区域下拉集合
    async setAreaOptions () {
      const res = await manageAreaSearchService()
      const index = this.formItems.findIndex(item => item.prop == 'manageHrAreaId')
      if (index > -1) this.formItems[index].options = res?.retData ?? []
    },
    // 图文
    handleImageText (row) {
      setAuthBtnId('图文编辑')
      this.maintainImage.visible = true
      this.maintainImage.skuInfo = { skuId: row.uuid, skuNo: row.skuNo }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .table-action {
  margin-right: 0;
}
</style>
